<template>
  <div style="padding: 10px;">
    <div style="text-align: center">
      <Circle
      style="margin-top: 10px;"
        :size="250"
        :trail-width="4"
        :stroke-width="5"
        :percent="(recurse_num / sum_num) * 100"
        stroke-linecap="square"
        stroke-color="#43a3fb"
      >
        <div class="demo-Circle-custom">
          <h2>{{ recurse_num }}/{{ sum_num }}</h2>
          <p>已经执行次数:{{ index_num }}</p>
          <span>
            占比
            <i>{{ (recurse_num / sum_num) * 100 }}%</i>
          </span>
        </div>
      </Circle>
    </div>
    <Button style="margin-top: 10px" type="success" long @click="export_pc_art"
      >导出编程文章数据</Button
    >

    <Button style="margin-top: 10px" type="success" long @click="export_ot_art"
      >导出其他文章数据</Button
    >
    <Button style="margin-top: 10px" type="success" long @click="export_link"
      >导出友情链接数据</Button
    >
  </div>
</template>

<script>
import {
  PATH_Directory_tree,
  PATH_other_Directory_tree,
  PATH_Directory_tree_blogroll,
  nodeType_article,
  nodeType_children_node,
  nodeType_link,
  nodeType_pdf,
  nodeType_root_node,
  art_html_1,
  art_html_2
} from '@/mylibs/define'
import putBuffer from '@/api/API_Uploading_Directory_Tree'
import FileSaver from 'file-saver'
import JSZip from 'jszip'

export default {
  data() {
    return {
      sum_num: 0,
      recurse_num: 0,
      index_num: 0
    }
  },
  methods: {
    // 导出编程文章数据
    async export_pc_art() {
      var { res, ok, err } = await putBuffer('get', PATH_Directory_tree)
      if (ok) {
        this.recurse_data_tree(res, null, true, '编程文章.zip')
      } else {
        this.$Notice.error({ desc: err })
      }
    },

    async export_ot_art() {
      var { res, ok, err } = await putBuffer('get', PATH_other_Directory_tree)
      if (ok) {
        this.recurse_data_tree(res, null, true, '其他文章.zip')
      } else {
        this.$Notice.error({ desc: err })
      }
    },

    async export_link() {
      var { res, ok, err } = await putBuffer(
        'get',
        PATH_Directory_tree_blogroll
      )
      if (ok) {
        if (Array.isArray(res)) {
          this.recurse_data_tree_link(res, true, null)
        }
      } else {
        this.$Notice.error({ desc: err })
      }
    },

    async recurse_data_tree(array, zip, is_first, zip_name) {
      this.index_num++
      if (is_first) {
        var fi_zip = new JSZip()
        this.sum_num = array.length
      }
      for (let index = 0; index < array.length; index++) {
        let element = array[index]

        if (element.node_type == nodeType_article) {
          let { res, ok, err } = await putBuffer(
            'get',
            element.upload.bucket_filepath
          )
          if (ok) {
            let html = art_html_1 + res.editor_data + art_html_2
            zip.file(element.title + '.html', html)
          } else {
            this.$Notice.error({ desc: err })
          }
        }

        if (element.node_type == nodeType_pdf) {
          let { res, err, ok } = await putBuffer(
            'get',
            element.upload.bucket_filepath,
            null,
            true
          )
          if (ok) {
            let name =
              element.title.indexOf('.pdf') != -1
                ? element.title
                : element.title + '.pdf'
            zip.file(name, res)
          } else {
            this.$Notice.error({ desc: err })
          }
        }

        if (
          element.node_type == nodeType_children_node ||
          element.node_type == nodeType_root_node
        ) {
          if (is_first) {
            this.recurse_num++
            var children_zip = fi_zip.folder(element.title)
          } else {
            var children_zip = zip.folder(element.title)
          }
          // 递归记得加await
          await this.recurse_data_tree(element.children, children_zip, false)
        }
      }

      if (is_first) {
        fi_zip
          .generateAsync({
            type: 'blob'
          })
          .then((content) => {
            FileSaver.saveAs(content, zip_name)
            this.$Notice.success({ desc: '导出成功' })
            this.recurse_num = 0
            this.sum_num = 0
            this.index_num = 0
          })
      }
    },

    recurse_data_tree_link(array, is_first, father_data) {
      this.index_num++
      if (is_first) {
        this.sum_num = array.length
        var str_obj = { data: '', str_1: '', str_2: '' }
      }

      for (let index = 0; index < array.length; index++) {
        const element = array[index]

        if (element.node_type == nodeType_link) {
          father_data.str_1 =
            father_data.str_1 +
            '<table><tr><th>链接名称</th><th>链接描述</th></tr><tr><td><a target="_blank" href="' +
            element.link.linkSite +
            '">' +
            element.link.linkName +
            '</a></td><td>' +
            element.link.describe +
            '</td></tr></table>'
          father_data.data = father_data.str_1 + father_data.str_2
        }

        if (
          element.node_type == nodeType_children_node ||
          element.node_type == nodeType_root_node
        ) {
          if (is_first) {
            this.recurse_num++
            str_obj.str_1 =
              '<table><tr><th>' + element.title + '</th></tr><tr><td>'
            str_obj.str_2 = '</td></tr></table>'
            str_obj.data = str_obj.data + str_obj.str_1 + str_obj.str_2
            this.recurse_data_tree_link(element.children, false, str_obj)
          } else {
            father_data.str_1 =
              father_data.str_1 +
              '<table><tr><th>' +
              element.title +
              '</th></tr><tr><td>'
            father_data.str_2 = '</td></tr></table>' + father_data.str_2

            father_data.data = father_data.str_1 + father_data.str_2
            this.recurse_data_tree_link(element.children, false, father_data)
          }
        }
      }

      if (is_first) {
        var zip = new JSZip()
        var str = art_html_1 + str_obj.data + art_html_2
        zip.file('友情链接.html', str)
        zip.generateAsync({ type: 'blob' }).then((content) => {
          FileSaver.saveAs(content, '友情链接.zip')
          this.$Notice.success({ desc: '导出成功' })
          this.recurse_num = 0
          this.sum_num = 0
          this.index_num = 0
        })
      }
    }
  }
}
</script>

<style scoped>
.demo-Circle-custom h1 {
  color: #3f414d;
  font-size: 28px;
  font-weight: normal;
}
.demo-Circle-custom p {
  color: #657180;
  font-size: 14px;
  margin: 10px 0 15px;
}
.demo-Circle-custom span {
  display: block;
  padding-top: 15px;
  color: #657180;
  font-size: 14px;
}
.demo-Circle-custom span:before {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  margin: 0 auto;
  background: #e0e3e6;
  position: relative;
  top: -15px;
}
.demo-Circle-custom span i {
  font-style: normal;
  color: #3f414d;
}
</style>
